<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="assets/css/public.css">
  <script src="js/config.js"></script>
  <script src="js/axios.min.js"></script>
  <title>创作</title>
</head>
<style>
  .content_box {
    width: fit-content;
    padding: 32px;
    margin: 66px auto;
    display: flex;
  }
  .content_left {
    width: 280px;
    margin-right: 24px;
    display: flex;
    flex-direction: column;
  }
  .content_right {
    width: 680px;
  }
  .title, .type {
    margin-bottom: 32px;
    display: flex;
  }
  .title span, .type span {
    display: inline-block;
    font-size: 18px;
    margin-right: 16px;
    flex-shrink: 0;
    padding-top: 10px;
    color: #aaa;
  }
  .title input {
    flex-grow: 1;
    height: 48px;
    padding: 0 16px;
    box-shadow: 0 0 6px rgba(0,0,0,.15);
  }
  .title textarea {
    height: 460px;
    flex-grow: 1;
    box-shadow: 0 0 6px rgba(0,0,0,.15);
    padding: 16px;
    font-size: 16px;
    line-height: 1.7
  }

  .history_list {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 24px;
  }
  .history_list:hover {
    border: 1px solid rgba(240, 65, 66);
  }
</style>

<body>
  <div class="content_box">
    <div class="content_left" id="listBox">

    </div>
    <div class="content_right">
      <div class="title">
        <span>标题</span>
        <input placeholder="请输入标题" id="title"/>
      </div>
      <div class="title type" style="display: flex;align-items: center;">
        <span style="padding-top: 0;">栏目</span>
        <input placeholder="请输入栏目" id="typeInput"/>
      </div>
      <div class="title">
        <span>内容</span>
        <textarea id="textContent" placeholder="请输入内容"></textarea>
      </div>
      <div style="display: flex;justify-content: flex-end;">
        <button onclick="onSubmit()" style="padding: 10px 16px;font-size: 18px;background-color: rgba(240, 65, 66);color: #fff;">提交</button>
      </div>
    </div>
  </div>
  <script>
    var userinfo;
    window.onload = function() {
      userinfo = window.localStorage.getItem('userinfo');
      userinfo = userinfo ? JSON.parse(userinfo) : null;
      console.log(userinfo)
      if(!userinfo) { window.open('/index', '_self');return;}
      getList();
      // getType();
    }
    var curType = '';

    function getList() {
      axios.post(`/news/pageList`, {
          userId: userinfo.userId,
          pageNum:"1",
          pageSize:"9999"
        }).then(result => {
          let res = result.data;
          let dom = document.getElementById('listBox');
          let text = ``
          for(let item of res.data.records) {
            text += `  <div class="history_list">
              <span style="margin-bottom: 12px;font-size: 18px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">${item.title}</span>
              <div style="color: #aaa;display: flex;justify-content: space-between;">
                ${item.createTime}
              <a href="javascript:void(0)" id="del${item.id}" onclick="onDel(${item.id})">删除</a>
              <a href="javascript:void(0)" id="delCancel${item.id}" onclick="onCnacelDel(${item.id})" style="margin-left: auto;margin-right: 10px;display: none;">取消</a>
              <a href="javascript:void(0)" id="delConfirm${item.id}" onclick="onConfirmDel(${item.id})" style="display: none;">确定删除？</a>
            </div>
          </div>`

            dom.innerHTML = text;
          }
        })
    }
    function getType() {
      axios.post(`/news/queryAllType`).then(result => {
        let res = result.data;
        if(res.code == 100) {
          let dom = document.getElementById('typeBox');
          let text = ``;
          for(let i=0;i<res.data.length;i++) {
            let item = res.data[i];
            if(i == 0) {
              text +=  `<div style="display: flex;align-items: center;margin-right: 16px;" onclick="onSelType('${item}')">
                <input style="margin-right: 10px;" type="radio" name="${i}" value="${item}" checked />
                <label style="font-size: 18px;" for="${i}">${item}</label>
              </div>`;
              curType = res.data[0];
            } else {
              text +=  `<div style="display: flex;align-items: center;margin-right: 16px;" onclick="onSelType('${item}')">
                <input style="margin-right: 10px;" type="radio" name="${i}" value="${item}" />
                <label style="font-size: 18px;" for="${i}">${item}</label>
              </div>`;
            }
          }
          dom.innerHTML = text;
        }
      })
    }

    function onSelType(e) {
      curType = e;
      let dom = document.querySelector('.type_list');
      for(let item of dom.children) {
        if(item.children[0].value != e) {
          item.children[0].checked = false;
        }
      }
    }

    function onDel(id) {
      let del = document.getElementById('del'+id);
      let delCancel = document.getElementById('delCancel'+id);
      let delConfirm = document.getElementById('delConfirm'+id);
      del.style.display = 'none';
      delCancel.style.display = 'inline-block'
      delConfirm.style.display = 'inline-block'
    }
    function onCnacelDel(id) {
      let del = document.getElementById('del'+id);
      let delCancel = document.getElementById('delCancel'+id);
      let delConfirm = document.getElementById('delConfirm'+id);
      del.style.display = 'inline-block';
      delCancel.style.display = 'none'
      delConfirm.style.display = 'none'
    }
    function onConfirmDel(id) {
      axios.post(`/news/delete`, {
        id
      }).then(result => {
        let res = result.data;
        if(res.code == 100) {
          getList()
        }
      })

    }

    function onSubmit() {
      let t = document.getElementById('title');
      let title = t.value;
      if(!title || !title.length) {
        window.alert('标题不能为空！');
        return;
      }
      let s = document.getElementById('typeInput');
      let status = s.value;
      if(!status || !status.length) {
        window.alert('栏目不能为空！');
        return;
      }
      let dom = document.getElementById('textContent');
      let text = dom.value.replaceAll(' ', '\xa0')
      text = text.replaceAll('\n', '<br>');
      userinfo = window.localStorage.getItem('userinfo');
      userinfo = userinfo ? JSON.parse(userinfo) : null;
      axios.post(`/news/add`, {
          title,
          text,
          type: status,
          userId: userinfo.userId
      }).then(result => {
        let res = result.data;
        if(res.code == 100) {
          window.alert('提交成功');
          getList()
        }
      })
    }
  </script>
</body>

</html>